<style>
    .level1 { margin-left:0px;}
    .level2 {margin-left:20px; display: none;}
    .level3 {margin-left:40px; display: none;}
    </style>
    
    <div class="tree"></div>
    
    <script src="http://unpkg.zhimg.com/jquery"></script>
    <script src="./tree.js"></script>
    <script src="./arr.js"></script>
    
    <script>
    // 1 获取树形数据数据
    let datas = getTree(arr, 0)
    // 2 遍历追加到页面
    $.each(datas, (i, item) => {
        $('.tree').append(`<p class="level level1" id="${item.id}" pid="0">
            <span>${item.children && item.children.length>0 ? '+' : ''}</span>
            ${item.name}
        </p>`)
        // 二级
        if (item.children && item.children.length>0)
        {
            $.each(item.children, (i2, item2) => {
                $('.tree').append(`<p class="level level2" id="${item2.id}" pid="${item.id}">
                    <span>${item2.children && item2.children.length>0 ? '+' : ''}</span>
                    ${item2.name}
                </p>`)
                // 三级
                if (item2.children && item2.children.length>0)
                {
                    $.each(item2.children, (i3, item3) => {
                        $('.tree').append(`<p class="level level3"  id="${item3.id}" pid="${item2.id}">${item3.name}</p>`)
                    })
                }
            })
        }
    })
    </script>
    
    
    <script>
    $('p').click(function() {
        // 1 获取+或-
        let fuhao = $(this).find('span').text()
        // 2 判断
        if (fuhao == '+')
        {
            let id = $(this).attr('id')
            $(`p[pid=${id}]`).show()
            $(this).find('span').text('-')
        } else {
            // - 
            let id = $(this).attr('id')
            $(`p[pid=${id}]`).hide()
            $(this).find('span').text('+')
        }
    })
    </script>